<template>
	<view>
		<view class="topBack aishishang">
			<view class="" style="height: 88px;">

			</view>
			<view class="px-20">
				<view class="search round-4 flex items-center" @click="$tab.nav(`/pages/search`)">
					<u-icon name="search" color="#F61564" size="20"></u-icon>
					<view class="ml-16">
						搜索您想要的
					</view>
				</view>

				<view class="flex items-center justify-between mt-48 bg-FFF" style="margin-top: 56rpx;">
					<u-tabs :list="screenList" lineWidth="30" lineHeight="3" lineColor="#F98A29" :activeStyle="{
					            color: '#303133',
					            fontWeight: 'bold',
					            transform: 'scale(1.05)'
					        }" :inactiveStyle="{
					            color: '#999999',
					            transform: 'scale(1)'
					        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" @click="screenClick">
					</u-tabs>
				</view>
			</view>
		</view>

		<uni-nav-bar :title="title" left-icon="back" @clickLeft="$tab.back()" :border="false" :status-bar="true"
			:fixed="true" background-color="transparent" color="#FFF">
		</uni-nav-bar>

		<view class="" style="height: 326rpx;">

		</view>

		<view class="px-20 py-20 relative" v-if="params.mathTypeOne && params.mathTypeTwo != null">
			<view class="mt-28">
				<ProductsList :params="params" ref="ProductsList" :width="710"></ProductsList>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: "",
				statusbar: uni.getSystemInfoSync().statusBarHeight + 44,
				screenList: [],
				params: {
					mathTypeOne: null,
					mathTypeTwo:null,
					columnType:8
				}
			};
		},
		onLoad(e) {
			this.title = e.title
			this.getData(e.code)
			this.params.mathTypeOne = e.id
		},
		onReachBottom() {
			this.$refs.ProductsList.loadList()
		},
		methods: {
			async getData(code) {
				const res = await this.$Api.common.typeChildrenAll({
					code
				})
				res.data.unshift({
					name: "全部",
					id: ""
				})
				this.screenList = res.data
				this.params.mathTypeTwo = ""
			},
			screenClick(e) {
				this.params.mathTypeTwo = e.id
				this.$refs.ProductsList.refreshList()
			}
		}
	}
</script>

<style>
	page {
		background-color: #FFF;
	}
</style>

<style lang="scss" scoped>
	.topBack {
		height: 326rpx;
		background: linear-gradient(180deg, #f4c494 0%, rgba(226, 255, 231, 0) 100%);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1;
		width: 100%;
	}

	.aishishang {
		background: url('https://file.fulewanjia.com/fulewanjia/profile/appImages2/shuzi-nav@2x.png') no-repeat;
		background-size: 100% 100%;
	}

	.uni-navbar {
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9;
	}

	.search {
		border: 1rpx solid #FA554E;
		height: 72rpx;
		background: rgba(255, 255, 255, 0.5);
		border-radius: 154rpx 154rpx 154rpx 154rpx;
		border: 3rpx solid #FFFFFF;
		line-height: 72rpx;
		padding-left: 16rpx;
		color: #F61564;
	}
</style>